<template>
	<view class="container">
		<!-- <navbar title='购物车' :showBack='false'></navbar> -->
		<view class="tip" v-if='list.length > 0'>
			<view class="tip-left">
				所有商品库存有限
			</view>
			<view class="finish" @tap='bindEdit'>{{isEdit ? "完成":"编辑"}}</view>
		</view>
		<view class="wrap" v-if='showPage'>
			<view class="cart-wrap" v-if='list.length > 0'>
				<view class="cart-item" v-for='(item,index) in list' :key="index">
					<view class="check line_center" :class="[item.is_checked ? 'checked':'no-check']"
						@tap='chooseGoods(index)'>
						<uni-icons type='checkmarkempty' size="12" color="#fff"></uni-icons>
					</view>
					<view class="goods-wrap">
						<view class="goods-img">
							<base-img :src='item.pic'></base-img>
						</view>
						<view class="goods-right">
							<view class="goods-name">{{item.goodname}}</view>
							<view class="goods-bottom-wrap">
								<view class="goods-price">
									￥{{item.price}}
								</view>
								<view class="num-wrap">
									<uni-number-box v-model="item.num" :min='1' :itemIndex='index'
										@change="changeNum"></uni-number-box>
								</view>
							</view>
						</view>
						
					</view>
				</view>
			</view>
			<template v-else>
				 <view class="no_box" v-if="list.length == 0">
				 	<image src="https://wanchuyun-img.oss-cn-beijing.aliyuncs.com/guomai/075efd19e1972e47091b1fe12728fa04f91adcf7.png" mode=""></image>
				 </view>
			</template>
		</view>
		<template v-if='token'>
			<view class="footer-wrap" :class="[platform == 'mpWx' || platform == 'AppPlus' ? 'bottom':'']" v-if='!isEdit'>
				<view class="left-wrap" @tap='allCheck'>
					<view class="check line_center" :class="[isCheckedAll ? 'checked':'no-check']">
						<uni-icons type='checkmarkempty' size="10" color="#fff"></uni-icons>
					</view>
					<view class="all-text">全选</view>
				</view>
				<view class="total-wrap">
					<text>合计：</text>
					<view class="price"><text>￥</text>{{totalPrice.toFixed(2)}}</view>
				</view>
				<button class="btn btn-count line_center" :disabled="isDisabled" :loading="isLoading" @tap='settleGoods'>{{btnText}}</button>
			</view>
			<view class="footer-wrap" :class="[platform == 'mpWx' || platform == 'AppPlus' ? 'bottom':'']" v-else>
				<view class="left-wrap" @tap='allCheck'>
					<view class="check line_center" :class="[isCheckedAll ? 'checked':'no-check']">
						<uni-icons type='checkmarkempty' size="10" color="#fff"></uni-icons>
					</view>
					<view class="all-text">全选</view>
				</view>
				<view class="total-wrap">
				</view>
				<button class="btn btn-del line_center" hover-class="none" @tap='delModal'>删除</button>
			</view>
		</template>
		<!-- 确认弹窗 -->
		<dialog-modal :showModal='showModal' :text='tipText' @cancel='close' @sure='bindDel'></dialog-modal>
	</view>
</template>

<script>
	const app = getApp();
	import dialogModal from '@/components/dialog-modal/dialog-modal.vue'
	export default {
		components: {
			dialogModal,
		},
		data() {
			return {
				token:'',
				showPage:false,
				platform: app.getPlatform(),
				list: [],
				totalPrice: 0,
				goodsIndex: 0,
				isCheckedAll: false,
				isEdit: false,
				showModal: false,
				selectIdStr: '',
				isDisabled:false,
				isLoading:false,
				btnText:'立即购买',
				selectNum:0,
				tipText:''
			};
		},
		onShow() {
			this.token = uni.getStorageSync('token') ? uni.getStorageSync('token'):'oXPca5HMUMFLVCOLn60nijoKGX9c'
			this.showPage = false;
			this.list = [];
			this.totalPrice = 0;
			this.selectNum = 0
			this.isCheckedAll = false;
			this.getcartList();
		},
		methods: {
			/* 获取购物车列表 */
			getcartList() {
				let that = this;
				uni.showLoading({
					title: '加载中...',
					mask: true
				})
				app.globalRequest({
					api: app.getApi().cartApi.cartList,
					method: 'post',
				}).then(res => {
					that.showPage = true;
					if (res.code == 1) {
						let list = res.data.list;
						list.forEach(v => {
							v.is_checked = false;
						})
						that.list = list;
					}
				}).catch(err => {

				})
			},
			/* 选择商品 (联动价格)*/
			chooseGoods(index) {
				this.selectNum = 0
				let list = this.list,
					selectNum = this.selectNum,
					totalPrice = this.totalPrice,
					isCheckedAll = this.isCheckedAll;
				if (list[index].is_checked) {
					list[index].is_checked = false;
					isCheckedAll = false;
					totalPrice = totalPrice - parseFloat(list[index].num) * parseFloat(list[index].price);
					selectNum--;
				} else {
					list[index].is_checked = true;
					totalPrice = totalPrice + parseFloat(list[index].num) * parseFloat(list[index].price);
					selectNum++;
					isCheckedAll = list.every(v => {
						return v.is_checked === true
					})
				}
				this.totalPrice = totalPrice;
				this.selectNum = selectNum;
				this.isCheckedAll = isCheckedAll;
				this.list = list;
			},
			/* 全选操作(联动价格) */
			allCheck() {
				this.selectNum = 0
				let totalPrice = this.totalPrice;
				if (this.isCheckedAll) {
					this.isCheckedAll = false;
					this.list.forEach(v => {
						v.is_checked = false;
						totalPrice = 0
					})
				} else {
					this.isCheckedAll = true;
					this.list.forEach(v => {
						v.is_checked = true;
						totalPrice = totalPrice + parseFloat(v.num) * parseFloat(v.price)
					})
				}
				this.selectNum = this.list.length;
				this.totalPrice = totalPrice;
			},
			/* 修改购物车数量(联动价格) */
			changeNum(obj) {
				let that = this,
					list = that.list,
					totalPrice = that.totalPrice,
					{
						inputValue,
						index,
						type
					} = obj;
				uni.showLoading({
					title: '加载中...',
					mask: true
				})
				app.globalRequest({
					api: app.getApi().cartApi.saveCart,
					data: {
						g_id: list[index].good_id,
						type: type == 'plus' ? 1 : 2,
						num: 1
					},
					method: 'post',
				}).then(res => {
					if (res.code == 1) {
						if (list[index].is_checked) {
							if (type == 'plus') {
								totalPrice = totalPrice + parseFloat(list[index].price)
							} else if (type == 'minus') {
								totalPrice = totalPrice - parseFloat(list[index].price)
							} else {
								totalPrice = totalPrice + parseFloat(inputValue) * parseFloat(list[index].price)
							}
						}
						that.totalPrice = totalPrice
					}
				}).catch(err => {

				})
			},
			/* 点击顶部编辑操作 */
			bindEdit() {
				this.isEdit = !this.isEdit;
			},
			/* 获取选中商品 */
			getSelectGoods(){
				let that = this,
					selectArr = [],
					selectIdStr = '',
					list = that.list;
				//获取选中的商品
				
				let checkList = list.filter(v => {
					return v.is_checked === true
				})
				checkList.forEach(v => {
					if (v.is_checked == true) {
						selectArr.push(v.cart_id)
					}
				})
			
				that.selectIdStr = selectArr.join(",")
				console.log('this.selectIdStr',selectArr)
			},
			/* 结算选中商品 */
			settleGoods(){
				var that = this;
				that.getSelectGoods();
				if (!that.selectIdStr) {
					uni.showToast({
						title: '您还没有选择商品哦！',
						icon: 'none',
						mask: true
					})
					return;
				}
				that.isDisabled = true;
				that.isLoading = true;
				that.btnText = '加载中...';
				
				uni.navigateTo({
					url: '/pages/goods-page/submit-order/submit-order?car_id='+ that.selectIdStr + '&type=2'
				})
				setTimeout(()=>{
						that.isDisabled = false;
						that.isLoading = false;
						that.btnText = '立即购买'
				},1000)
				
				// app.globalRequest({
				// 	api: app.getApi().order.createOrder,
				// 	method: 'POST',
				// 	data: {
				// 		cart_ids: that.selectIdStr
				// 	}
				// }).then(res => {
				// 	console.log('res', res)
				// 	that.isDisabled = false;
				// 	that.isLoading = false;
				// 	that.btnText = '结算'
				// 	if (res.code == 0) {
						
				// 	}else{
				// 		uni.showToast({
				// 			title:res.msg,
				// 			icon:'none'
				// 		})
				// 	}
				// }).catch(err => {
				
				// })
			},
			/* 删除选中商品 */
			delModal() {
				this.getSelectGoods();
				if (!this.selectIdStr) {
					uni.showToast({
						title: '您还没有选择商品哦！',
						icon: 'none',
						mask: true
					})
					return;
				}
				this.tipText = `确认将商品删除吗？`;
				this.showModal = true;
			},
			/* 点击删除操作 */
			bindDel() {
				let that = this,
					list = that.list,
					newList = [];
				uni.showLoading({
					title: '加载中...',
					mask: true
				})
				app.globalRequest({
					api: app.getApi().cartApi.cartDel,
					method: 'POST',
					data: {
						cart_ids: this.selectIdStr
					}
				}).then(res => {
					console.log('res', res)
					if (res.code == 1) {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							mask: true
						})
						newList = list.filter(v => {
							return v.is_checked === false
						})
						that.list = newList;
						that.showModal = false;
						console.log('newList', newList)
					}
				}).catch(err => {

				})
			},
			close() {
				this.showModal = false;
			}

		}
	}
</script>

<style lang="scss" scoped>
	.wrap {
		margin: 0 24rpx;
		padding-bottom: 120rpx;
		padding-top: 80rpx;
	}

	.cart-item {
		width: 100%;
		padding: 24rpx 28rpx;
		box-sizing: border-box;
		background: $dis-con-color;
		display: flex;
		align-items: center;
		margin-bottom: 24rpx;
	}

	.check {
		width: 32rpx;
		height: 32rpx;
		border-radius: 100%;
		box-sizing: border-box;
		flex-shrink: 0;
		line-height: 32rpx;
	}

	.no-check {
		border: 2rpx solid #CCCCCC;
	}

	.checked {
		background: $dis-font-color;
	}

	.goods-wrap {
		flex: 1;
		overflow: hidden;
		display: flex;
		margin-left: 20rpx;

		.goods-img {
			width: 176rpx;
			height: 176rpx;
			margin-right: 20rpx;
		}

		.goods-right {
			flex: 1;
			overflow: hidden;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
		}

		.goods-name {
			width: 100%;
			height: 80rpx;
			font-size: 28rpx;
			line-height: 40rpx;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			overflow: hidden;
			text-overflow: ellipsis;
		}

		.goods-bottom-wrap {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.goods-price {
				font-size: 32rpx;
				color: $dis-font-color;
			}
		}
	}

	.bottom {
		bottom: 0 !important;
	}

	.footer-wrap {
		width: 100%;
		height: 100rpx;
		padding: 0 24rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		background: #FFFFFF;
		position: fixed;
		left: 0;
		bottom: 50px;
		z-index: 22;

		.left-wrap {
			display: flex;
			align-items: center;

			.all-text {
				font-size: 24rpx;
				color: #666;
				margin-left: 16rpx
			}
		}

		.total-wrap {
			flex: 1;
			display: flex;
			align-items: baseline;
			justify-content: flex-end;

			text {
				font-size: 24rpx;
			}

			.price {
				font-size: 40rpx;
			}
		}

		.btn {
			width: 200rpx;
			height: 76rpx;
			border-radius: 38rpx;
		}

		.btn-count {
			background: $dis-liner-color;
			color: $dis-con-color;
			margin-left: 16rpx;
		}

		.btn-del {
			border: 2rpx solid $dis-font-color;
			color: $dis-font-color;
		}
	}

	.tip {
		width: 100%;
		height: 80rpx;
		padding: 0 24rpx;
		box-sizing: border-box;
		background: $dis-bg-color;
		position: fixed;
		left: 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 24rpx;
		z-index: 222;
		color:#999999;
	}
	
	.no_box{
		width: 250rpx;
		height: 250rpx;
		margin: 200rpx auto;
		image{
			width: 100%;
			height: 100%;
		}
	}
</style>